<template>
    <div id="app">
        <!-- 头像昵称 -->
        <div class="headpic_box">
            <!-- 头像 -->
            <div class="img"><img src="//img02.yiguo.com/e/web/150703/00781/140145/no-pic.jpg"></div>
            <!-- 昵称 -->
            <span class="username">登录/注册</span>
        </div>
        <!-- 钱包 -->
        <div class="wallet">
            <!-- 钱 -->
            <div class="money">
                <span class="green">0.00</span>
                <span>卡包余额</span>
            </div>
            <!-- 币 -->
            <div class="coin">
                <span class="green">150</span>
                <span>悠币</span>
            </div>
        </div>

        <!-- 订单配送详情 -->
        <div class="give_box">
            <div v-for="(item,index) in arr" :key="index" class="give_box_item">
                <div class="img">
                    <img :src="item.url" alt="">
                </div>
                <div class="text">
                    {{item.giveName}}
                </div>
            </div>
        </div>

        <!-- 优惠券 -->
        <div class="coupons">
            <div class="give_box_item">
                <div class="img">
                    <img src="https://img07.yiguoimg.com/d/web/181029/00591/155051/coupons.png" alt="">
                </div>
                <div class="text">
                    待支付
                </div>
            </div>
            <div class="give_box_item">
                <div class="img">
                    <img src="https://img07.yiguoimg.com/d/web/181029/00591/155051/coupons.png" alt="">
                </div>
                <div class="text">
                    待支付
                </div>
            </div>
            <div class="give_box_item">
                <div class="img">
                    <img src="https://img07.yiguoimg.com/d/web/181029/00591/155051/coupons.png" alt="">
                </div>
                <div class="text">
                    待支付
                </div>
            </div>
            <div class="give_box_item">
                <div class="img">
                    <img src="https://img07.yiguoimg.com/d/web/181029/00591/155051/coupons.png" alt="">
                </div>
                <div class="text">
                    待支付
                </div>
            </div>
            <div class="give_box_item">
                <div class="img">
                    <img src="https://img07.yiguoimg.com/d/web/181029/00591/155051/coupons.png" alt="">
                </div>
                <div class="text">
                    待支付
                </div>
            </div>
            <div class="give_box_item">
                <div class="img">
                    <img src="https://img07.yiguoimg.com/d/web/181029/00591/155051/coupons.png" alt="">
                </div>
                <div class="text">
                    待支付
                </div>
            </div>
            <div class="give_box_item">
                <div class="img">
                    <img src="https://img07.yiguoimg.com/d/web/181029/00591/155051/coupons.png" alt="">
                </div>
                <div class="text">
                    待支付
                </div>
            </div>
            <div class="give_box_item">
                <div class="img">
                    <img src="https://img07.yiguoimg.com/d/web/181029/00591/155051/coupons.png" alt="">
                </div>
                <div class="text">
                    待支付
                </div>
            </div>
        </div>
    </div>
</template>

<script>

export default({
    data(){
        return{
            arr:[],//存储获取订单
            arr2:[]//存储获取钱包
        }
    },
    created(){
        this.axios({
            url:'https://www.fastmock.site/mock/801f19e46995e076b2d400ef9655ca20/my/diangdan',
            methods:'GET'
        }).then(res=>{
            this.arr = res.data
            console.log(this.arr)
        })
    }
})
</script>

<style scoped>
    #app{
        background: #f4f4f4;
        width: 100%;
        height: 667px;
    }
    .headpic_box{
        width: 100%;
        height: 140px;
        background: #2dd282 url("//img06.yiguoimg.com/d/web/180517/01262/143351/bgimg.jpg") 100% 100%;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
    }
    .headpic_box .img img{
        width: 78px;
        height: 78px;
        border-radius: 50%;
        margin: 0 20px;
    }
    .username{
        font-size: 15.5px;
        font-weight: 400;
        color: #ffff;
    }
    .wallet{
        width: 100%;
        height: 45px;
        background: #fff;
        display: flex;
        align-items: center;
    }
    .green{
        color: #0e9f4e;
    }
    .money{
        flex: 1;
        display: flex;
        flex-direction: column;
        text-align: center;
    }
    .coin{
        flex: 1;
        display: flex;
        flex-direction: column;
        text-align: center;
    }
    .give_box{
        width: 100%;
        height: 81px;
        background: #fff;
        margin: 10px 0;
        display: flex;
        align-items: center;
    }
    .give_box_item{
        flex: 25%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 15px 0;
    }
    .give_box_item .img img{
        width: 22.3px;
        height: 16.3px;
        margin-bottom: 5px;
    }
    .coupons{
        width: 94%;
        padding: 0 3%;
        background: #fff;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }
    .coupons .img img{
        width: 32.6px;
        height: 32.6px;
        margin: 0;
    }
</style>